<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无界Markdown在线阅读器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📖 无界Markdown在线阅读器</h1>
            <p class="subtitle">上传、分享、阅读Markdown文档，支持导出HTML和Word格式</p>
        </header>

        <main class="main">
            <div class="upload-section">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">📁</div>
                    <h3>拖拽或点击上传Markdown文件</h3>
                    <p>支持.md格式，文件大小不超过5MB</p>
                    <input type="file" id="fileInput" accept=".md" style="display: none;">
                    <button class="upload-btn" id="uploadBtn">选择文件</button>
                </div>
                
                <div class="progress-bar" id="progressBar" style="display: none;">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
            </div>

            <div class="result-section" id="resultSection" style="display: none;">
                <div class="success-message">
                    <div class="success-icon">✅</div>
                    <h3>上传成功！</h3>
                    <p>您的文档已成功上传，可以通过以下链接分享：</p>
                    
                    <div class="share-info">
                        <div class="share-url-container">
                            <input type="text" id="shareUrl" readonly class="share-url">
                            <button class="copy-btn" id="copyBtn">复制链接</button>
                        </div>
                        
                        <div class="action-buttons">
                            <a href="#" id="viewBtn" class="action-btn view-btn" target="_blank">📖 查看文档</a>
                            <a href="#" id="exportHtmlBtn" class="action-btn export-btn">📄 导出HTML</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="recent-documents-section" id="recentDocumentsSection">
                <h2>📚 最近分享</h2>
                <p class="section-subtitle">网友们最近上传的精彩文档</p>
                <div class="recent-documents-grid" id="recentDocumentsGrid">
                    <div class="loading-placeholder" id="documentsLoading">
                        <div class="loading-spinner"></div>
                        <p>加载中...</p>
                    </div>
                </div>
            </div>

            <div class="features-section">
                <h2>功能特色</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🚀</div>
                        <h3>快速上传</h3>
                        <p>支持拖拽上传，无需注册登录，5MB以内的Markdown文件秒传</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🔗</div>
                        <h3>便捷分享</h3>
                        <p>生成唯一分享链接，支持访问统计，随时随地分享您的文档</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">📱</div>
                        <h3>响应式阅读</h3>
                        <p>完美适配各种设备，提供优雅的在线阅读体验</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">💾</div>
                        <h3>多格式导出</h3>
                        <p>支持导出为HTML和Word格式，满足不同场景需求</p>
                    </div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 无界Markdown阅读器 | <a href="/admin">管理后台</a></p>
        </footer>
    </div>

    <div class="notification" id="notification"></div>

    <script src="script.js"></script>
</body>
</html>